<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./common.css">
    <style>
        * {
          margin: 0;
          padding: 0;
        }
        ul {
          list-style: none;
          height: 40px;
          border: 1px solid #333;
        }
        .tab {
          width: 600px;
          height: 350px;
          margin: 50px auto;
        }
        li {
          float: left;
          width: 119px;
          text-align: center;
          line-height: 40px;
        }
        .tab img {
          width: 600px;
          height: 500px;
        }
        li.ac {
          background-color: #ccc;
        }
        .content div {
          display: none;
        }
        .content div.ac {
          display: block;
        }
    
      </style>
</head>
<body>
    <div id="tab" class="tab">
        <ul>
          <li class="ac">杨舒予1</li>
          <li>杨舒予2</li>
          <li>杨舒予3</li>
          <li>杨舒予4</li>
          <li>杨舒予5</li>
        </ul>
        <div class="content">
          <div class="ac"><img src="./450b67a167f99e39d65870584e52c5b.jpg" alt=""></div>
          <div><img src="./9319036d5c51ed91b68fc555757a22d.jpg" alt=""></div>
          <div><img src="./th.jpg" alt=""></div>
          <div><img src="./th (1).jpg" alt=""></div>
          <div><img src="./th (2).jpg" alt=""></div>
        </div>
      </div>
      <script>
          //获取到图片跟 按钮
          var btns = document.querySelectorAll('#tab li')
          var imgs = document.querySelectorAll('#tab .content div')
                
          //利用循环  找到每个按钮的索引 因为没办法判断用户点击的那一张图片 所以需要把所有按钮的样式都清空
          for (var i = 0; i < btns.length; i++) {
            btns[i].setAttribute('data-index', i)
            console.log(i)
            btns[i].index = i
            btns[i].onclick = function () {
                for ( var j = 0; j < btns.length; j++){
                    btns[j].classList.remove('ac')
                    imgs[j].classList.remove('ac')
                }
                this.classList.add('ac')
                // imgs[i].classList.add('ac')
                //  var index = this.getAttribute('data-index')
                imgs[this.index].classList.add('ac')
            }
          }
          

      </script>
</body>
</html>